<template>
  <div class="tool-coding-url">
    <div>
      <el-button size="mini" type="primary" @click="btnClick(true)">编 码</el-button>
      <el-button size="mini" type="primary" @click="btnClick(false)">解 码</el-button>
    </div>

    <!--提示框-->
    <el-dialog
      :title="'URL' + (coding ? '编码(encode)' : '解码(decode)')"
      :visible.sync="isShow"
      width="800px"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="URL">
          <el-input v-model="form.inputValue" type="textarea"/>
        </el-form-item>
        <el-form-item v-if="form.data" label="Data">
          <el-card :body-style="{ padding: '0px 15px' }" class="box-card">
            <span class="w-text-warp pop-show-data">{{ form.data }}</span>
          </el-card>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" @click="isShow = false">取 消</el-button>
          <el-button :disabled="!form.inputValue" size="mini" type="primary" @click="okBtnClick">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({})
export default class WebToolUrl extends Vue {
  isShow = false;
  // 编码还是解码
  coding = true;
  form = {
    inputValue: "",
    data: ""
  };

  btnClick(coding: boolean) {
    this.form = {
      inputValue: "",
      data: ""
    };
    this.coding = coding;
    this.isShow = true;
  }
  okBtnClick() {
    const func = this.coding ? encodeURIComponent : decodeURIComponent;
    this.form.data = func(this.form.inputValue);
  }
}
</script>

<style scoped>
</style>

<style lang="scss">
.tool-coding-url {
  .el-form-item__content {
    line-height: 24px;
  }
}
</style>
